<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel='stylesheet' href='qrc:/yt_list.css' type='text/css' />
<script type='text/javascript' src='qrc:/jslib/jquery-1.8.2.min.js' charset='UTF-8'></script>
<script type='text/javascript' src='qrc:/jslib/jquery.timers-1.2.js' charset='UTF-8'></script>
<script type='text/javascript' src='qrc:/jslib/dateformat.js' charset='UTF-8'></script>
<script type='text/javascript' src='qrc:/yt_list.js' charset='UTF-8'></script>
<script type='text/javascript' src='qrc:/page/page2_list1_updated.js' charset='UTF-8'></script>
</head>
<body>
[page2.html]
<style>
html {height:100%;}
body{
margin:0;
padding:0;
height:100%;
}
.height_1em{
	height:1.1em;
	width:100%;
	overflow:hidden;
#	border:solid 1px red;
}
#divLeft{
margin:0;
padding:0;
float:left;
width:400px;
height:100%;
####overflow-y:scroll;
####overflow-y:hidden;
####overflow:hidden;
border: 1px solid blue;
}
#divRight{
float:left;
margin:0;
padding:0;
width:570px;
height:100%;
}
#sort_place{
height:30px;
width:100%;
background-color: green;
}
#sort_place_below{
height:30px;
width:100%;
background-color: pink;
}
#mydiv{
#float:left;
margin:0;
padding:0;
#width:550px;
width:100%;
height:100%;
overflow-x:hidden;
overflow-y:scroll;
border: 1px solid blue;
}
#mydiv table.page{
height:92px;
}
#rec_place{
margin:0;
padding:0;
width:100%;
height:200px;
overflow-y:scroll;
border: 1px solid orange;
}
#vlc_place{
margin:0;
padding:0;
height:280px;
width:100%;
overflow-y:auto;
border: 1px solid pink;
}
#vlc_button_place{
height:30px;
width:100%;
overflow-y:hidden;
border: 1px solid black;
}
</style>
<div id=divAll style="width:95%; height:95%; border:1px solid red;">
	<div id=divLeft>
		<div id=vlc_place>
		<!--
			<object name=myvideo classid=MplayerWindow type='application/x-qt-styled-widget'
			width=340 height=240></object>
			<p id=video_title></p>
			<embed src="qrc:/page/fladance.swf" width="300" height="200" name="movie1"
			allowfullscreen="true"
			flashvars="fms_app=&video_file=http%3A%2F%2Fv18.lscache8.c.youtube.com%2Fvideoplayback%3Fip%3D183.0.0.0%26sparams%3Did%2Cexpire%2Cip%2Cipbits%2Citag%2Calgorithm%2Cburst%2Cfactor%26fexp%3D901803%2C900073%26algorithm%3Dthrottle-factor%26itag%3D5%26ipbits%3D8%26burst%3D40%26sver%3D3%26expire%3D1275548400%26key%3Dyt1%26signature%3D4114619AFC91192E908504CEF601DAD16917B7FB.11C3C0484B8CD3AE0524CAA41B4A72EA88133602%26factor%3D1.25%26id%3D1adcbbde9e0062e0&factor=1.25&id=1adcbbde9e0062e0&image_file=http://i.ytimg.com/vi/Gty73p4AYuA/2.jpg&autoplay=true&mute=false&vol=0.5&controllbar=true&buffertime=5" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
		-->
		</div>
		<div id=vlc_button_place></div>
		<div id=rec_place></div>
	</div>
	<div id=divRight>
		<div id=sort_place>
			<select id=sort_spec>
				<option value="waiting">待ち時間</option>
                <option value="latest">ポジション</option>
				<option value="pubdate">公開日</option>
				<option value="total">トータル</option>
				<option value="delta">伸び率</option>
				<option value="unit_delta">U伸び率</option>
				<option value="favorite_total">Fトータル</option>
				<option value="favorite_delta">F伸び率</option>
			</select>
			<input type="checkbox" id="check_hide_zero" checked>
			<select id=select_hide_rank>
				<option value="0">[n位まで隠す]</option>
				<option value="10">10位まで</option>
				<option value="20">20位まで</option>
			</select>
			<select id=select_hide_hour>
				<option value="0">[n時間]</option>
				<option value="1">1時間</option>
				<option value="2">2時間</option>
			</select>
			<select id=select_hide_top>
				<option value="0">[nページ]</option>
				<option value="1">1ページ</option>
				<option value="2">2ページ</option>
				<option value="3">3ページ</option>
				<option value="4">4ページ</option>
				<option value="5">5ページ</option>
				<option value="6">6ページ</option>
				<option value="7">7ページ</option>
				<option value="8">8ページ</option>
				<option value="9">9ページ</option>
				<option value="10">10ページ</option>
				<option value="11">11ページ</option>
				<option value="12">12ページ</option>
				<option value="13">13ページ</option>
				<option value="14">14ページ</option>
				<option value="15">15ページ</option>
				<option value="16">16ページ</option>
				<option value="17">17ページ</option>
				<option value="18">18ページ</option>
				<option value="19">19ページ</option>
				<option value="20">20ページ</option>
				<option value="21">21ページ</option>
				<option value="22">22ページ</option>
				<option value="23">23ページ</option>
				<option value="24">24ページ</option>
				<option value="25">25ページ</option>
				<option value="26">26ページ</option>
				<option value="27">27ページ</option>
				<option value="28">28ページ</option>
				<option value="29">29ページ</option>
				<option value="30">30ページ</option>
			</select>
			<button onclick="handle_reset_hide();">再表示</button>
		</div>
		<div id=mydiv></div>
		<div id=sort_place_below>
			<select id=select_domain>
				<option value="">----</option>
				<option value="fv:akmiyoshi">akmiyoshiのお気に入り</option>
				<option value="pl:C04C0F9A39F92146">最強の萌えキャラ</option>
			</select>
			<input id="text_keyword" type="text" size="25" />
			<button onclick="web1.cmd_reload_db()">DBリロード</button>
			<button onclick="web1.cmd_reload_web()">DB最新化</button>
		</div>
	</div>
</div>
<!--
<object name="myslider" classid="QSlider" type="application/x-qt-styled-widget" width=250 height=30>
	<param name="orientation" value="Horizontal">
</object>
-->
</body>
<script type='text/javascript' src='qrc:/jslib/dateformat.js' charset='UTF-8'></script>


<script type='text/javascript' >
//[#select_hide_rank]
$("#select_hide_rank").children().remove();
var v_option = $("<option>").attr("value", 0).text("[n位]");
$("#select_hide_rank").append(v_option);
for(var i=0; i<100; i++)
{
	var v_rank = (i+1)*10;
	var v_option = $("<option>").attr("value", v_rank).text(v_rank+"位");
	$("#select_hide_rank").append(v_option);
}
//[#select_hide_hour]
$("#select_hide_hour").children().remove();
var v_option = $("<option>").attr("value", 0).text("[n時間]");
$("#select_hide_hour").append(v_option);
for(var i=0; i<100; i++)
{
	var v_hour = i+1;
	var v_option = $("<option>").attr("value", v_hour).text(v_hour+"時間");
	$("#select_hide_hour").append(v_option);
}


dbgmsg("(01)");
function Page2(a_sender)
{
    dbgmsg("Page2()");
    this.sender = a_sender;
	//dbgmsg(a_sender.answer_1);
	//a_sender.answer_1.connect(this, this.handle_1);
    dbgmsg(ytweb.answer_vlc_player);
    ytweb.answer_vlc_player.connect(this, this.answer_vlc_player);
	//document.myslider.valueChanged.connect(this, this.handle_valueChanged);
}
dbgmsg("(02)");
Page2.prototype.handle_1 = function(a_1, a_2) {
    dbgmsg("Page1.prototype.handle_1()");
    alert(a_1);
    alert(a_2);
}
dbgmsg("(03)");
Page2.prototype.answer_vlc_player = function(/*QString*/ a_target, /*QString*/ a_title) {
    //dbgmsg("Page1.prototype.answer_vlc_player()");
    //dbgmsg(a_target);
    dbgmsg(a_title);
    fn_vlc_player("#vlc_place", a_target, a_title);
}

Page2.prototype.handle_valueChanged = function(x) {
	dbgmsg("Page1.prototype.handle_valueChanged()");
	dbgmsg(x);
	dbgmsg(document.myslider.value);
}
dbgmsg("(04)");
dbgmsg(web1);
dbgmsg(ytweb);
dbgmsg("(05)");
g_Page2 = new Page2(web1);
function fn_adjust_divLeft()
{
	dbgmsg("fn_adjust_divLeft()!");
	var v_h0 = $("#divAll").height();
    $("#divLeft").height(v_h0 - 2);
    var v_h1 = $("#divLeft").height();
    var v_h2 = $("#vlc_place").height();
    var v_h3 = $("#vlc_button_place").height();
    var v_minus = 4;
    $("#rec_place").height(v_h1 - v_h2 - v_h3 - v_minus);
}
function fn_adjust_divRight()
{
	dbgmsg("fn_adjust_divRight()!");
	var v_h0 = $("#divAll").width();
	var v_h1 = $("#divLeft").width();
	var v_minus = 50;
	$("#divRight").width(v_h0 - v_h1 - 2);
	var v_height =$("#divRight").height() - $("#sort_place").height() - $("#sort_place_below").height();
	dbgmsg("height=" + v_height);
	$("#mydiv").height(v_height - 3);
}

/*
var g_scrolling = 0;
$("#mydiv").scroll(function(){
	g_scrolling++;
	setTimeout(function(){
		g_scrolling--;
		if(g_scrolling == 0) handle_redisplay();
	}, 50);
});
*/

var g_resizing = 0;
$(window).resize(function(){
	g_resizing++;
	setTimeout(function(){
		g_resizing--;
		if(g_resizing == 0)
		{
			dbgmsg("resize!");
			dbgmsg($(this).height());
			fn_adjust_divLeft();
			fn_adjust_divRight();
		}
	}, 50);
});
fn_adjust_divLeft();
fn_adjust_divRight();
//dbgmsg(document.myslider);
dbgmsg("eof(page2.html)");
function fn_handle_1(a_1, a_2)
{
	dbgmsg(a_1);
	dbgmsg(a_2);
}
web1.answer_1.connect(fn_handle_1);
web1.answer_2.connect(function(a){
	dbgmsg(a);
	//dbgmsg(a.value(1));
});
web1.answer_3.connect(function(a){
	dbgmsg(a);
	a.openWithBrowser("http://www.google.com/");
});
list1.sig_sort_spec.connect(function(a_type){
	dbgmsg("sig_sort_spec(" + a_type + ")");
	$("#sort_spec").val(a_type);
});

dbgmsg("eof(page2.html)2");
// コンボボックス
$("#sort_spec").change(function(){
    list1.reload2();
	list1.sort($("#sort_spec").val());
});
$("#select_domain").change(function(){
	list1.domain = $(this).val();
});
function handle_changes()
{
	$(".page").show();
	//$(".page").addClass("show_true");
	//$(".page").removeClass("show_false");
	//
	if($("#check_hide_zero").attr("checked"))
	{
		$(".zero_delta").hide();
		//$(".zero_delta").addClass("show_false");
	}
	//
	var v_hide = parseInt($("#select_hide_top").val());
	////dbgmsg("v_hide="+(typeof v_hide)+v_hide);
	for(var i=0; i<v_hide; i++)
	{
		$(".page"+(i+1)).hide();
		//$(".page"+(i+1)).addClass("show_false");
	}
	var v_hide_rank = parseInt($("#select_hide_rank").val());
	for(var i=0; i<v_hide_rank; i++)
	{
		$(".rank"+(i+1)).hide();
		//$(".rank"+(i+1)).addClass("show_false");
	}
	var v_hide_hour = parseInt($("#select_hide_hour").val());
	for(var i=0; i<v_hide_hour; i++)
	{
		$(".hour"+(i+1)).hide();
		//$(".hour"+(i+1)).addClass("show_false");
	}
	handle_redisplay();
}
$("#check_hide_zero").change(function(){
	handle_changes();
});
$("#select_hide_top").change(function(){
	handle_changes();
});
$("#select_hide_rank").change(function(){
	handle_changes();
});
$("#select_hide_hour").change(function(){
	handle_changes();
});

function handle_reset_hide()
{
	$("#select_hide_top").val(0);
	$("#select_hide_rank").val(0);
	$("#select_hide_hour").val(0);
	handle_changes();
}
function handle_page_link(a_page)
{
	if(a_page > 30) a_page = 30;
	$("#select_hide_top").val(a_page);
	handle_changes();
}
function handle_rank_link(a_rank)
{
	dbgmsg("a_rank="+a_rank);
	var v_rank = Math.floor((a_rank + 9)/10) * 10;
	dbgmsg("v_rank="+v_rank);
    if(v_rank > 1000) v_rank = 1000;
	$("#select_hide_rank").val(v_rank);
	handle_changes();
}
function handle_hour_link(a_hour)
{
	dbgmsg("a_hour="+a_hour);
	if(a_hour > 100) a_hour = 100;
	$("#select_hide_hour").val(a_hour);
	handle_changes();
}

dbgmsg("eof(page2.html)3");
dbgmsg("(page2.html)1");

function handle_redisplay()
{
	////dbgmsg(new Date());
	var $mydiv = $("#mydiv");
	var $scrollTop = $mydiv.scrollTop();
	$mydiv.scrollLeft(0);
	var $record_list = $(".page:not(:hidden)");
	var $record_height = $($record_list.get(0)).height() + 2;
	var $extra_records = 5;
	var $extra_height = $record_height * $extra_records;
	////$record_list.css({"background":""});

	var $start = Math.floor($scrollTop/$record_height);
	for(var i=$start; i<$record_list.size(); i++)
	{
		var v_record = $($record_list.get(i));
		////var v_record_height = v_record.height();
		////var v_debug_height = 0;

		v_offset = v_record.offset();
		v_offset.top -= $mydiv.offset().top;
		v_offset.left -= $mydiv.offset().left;
		////dbgmsg("i="+i+"/v_offset.top="+v_offset.top);
		////dbgmsg(v_record.get(0).outerHTML);
		fn_prepare_h_record(v_record);
		if(v_offset.top > ($mydiv.height() + $extra_height))
		{
			break;
		}
	}
}
var g_scrolling = 0;
$("#mydiv").scroll(function(){
	////dbgmsg("scroll()"+new Date());
	g_scrolling++;
	var v_timeout = (g_scrolling <= 1 ? 500 : 250);
	setTimeout(function(){
		g_scrolling--;
		if(g_scrolling == 0) handle_redisplay();
	}, v_timeout);
});
//$("#mydiv")
$(document)
.mousedown(function(){
	dbgmsg("mousedown");
})
.mouseup(function(){
	dbgmsg("mouseup");
})
;

dbgmsg("#text_keyword="+$("#text_keyword").size());
$("#text_keyword")
.change(function(){
	dbgmsg($(this).val());
	list1.keyword = $(this).val();
	dbgmsg("end");
})
.focus(function(){
	$(this).select();
})
.click(function(){
	$(this).select();
return false;
});

$(document).keydown(function(e){
	if( e.keyCode == 13)
	{
		list1.keyword = $("#text_keyword").val();
		web1.cmd_reload_db();
	}
});
if(false)
{
	$("#select_domain").val("fv:akmiyoshi");
	list1.domain = "fv:akmiyoshi";
}

dbgmsg("[before]");
ytweb.answer_yt_player.connect(function(a_id, a_title){
	fn_yt_player("#vlc_place", a_id, a_title);
});
dbgmsg("[after]");

</script>
